<!DOCTYPE html>
<html>
<head>
    <title>编辑</title>
    <link href="__PLUGIN_TMPL__/public/assets/layui/css/layui.css" rel="stylesheet" type="text/css">
    <link href="__PLUGIN_TMPL__/public/assets/layui/css/backend.min.css" rel="stylesheet" type="text/css">
    <include file='public/head'>
        <style>
            table th, table td{text-align: center;}
            .ml-10 { margin-left: 10px; }
			.layui-icon{font-size: 14px !important;}
			.layui-form-label{ width: auto;}
			.layui-btn.layui-btn-sm .fa{ font-size: 14px !important;}
			.mr4{ margin-right: 4px;}
			.layui-form-item{ margin-bottom: 0px;}
			.row{ margin: 0 !important;}
			.form-horizontal .form-group { margin: 0 0 15px 0}
        </style>
</head>
<body>
	<div class="wrap js-check-wrap" style="padding: 20px 20px 0px 20px;">
	    <ul class="nav nav-tabs">
	        <php> $currentTab = 3 ;</php>
	        <include file="public/nav" />
	    </ul>
	    <div class="well margin-top-20">
			<div id="moduleDevolopProcess"></div>
		</div>
	</div>
    <div id="main" role="main">
        <div class="tab-content tab-addtabs">
			<div id="content">
				<div class="row">
					<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
						<div class="content">
							<form id="edit-form" class="form-horizontal nice-validator n-default n-bootstrap">
								<div class="form-group">
									<label class="control-label col-xs-12 col-sm-2">模块标识:</label>
									<div class="col-xs-12 col-sm-8">
										<input class="form-control" id="module-symbol" name="name" type="text" readonly value="{$module.name|default=''}" placeholder="请填写模块英文名(大驼峰命名，如：ModuleConfig)" autocomplete="off" >
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-xs-12 col-sm-2">模块名:</label>
									<div class="col-xs-12 col-sm-8">
										<input class="form-control" id="module-name"  name="title" type="text" readonly value="{$module.title|default=''}" placeholder="请填写模块中文名" >
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-xs-12 col-sm-2">模块分类:</label>
									<div class="col-xs-12 col-sm-8">
										<select class="form-control" name ="category" required placeholder="请选择分类"> 
											<option value=''>请选择模块分类</option>
											<volist name="category" id="vo">
												<option value='{$vo.id}' <?php if( $module['category'] == $vo['id'] ){echo 'selected';}?> >{$vo.name}</option>
											</volist>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-xs-12 col-sm-2">模块简介:</label>
									<div class="col-xs-12 col-sm-8">
										<input class="form-control"   name="describe" type="text"  value="{$module.describe|default=''}" placeholder="请填写模块简介信息" required>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-xs-12 col-sm-2">模块功能介绍:</label>
									<div class="col-xs-12 col-sm-8">
										<textarea class="form-control"  rows='3' name="introduce"  placeholder="请填写模块功能介绍" required>{$module.introduce|default=''}</textarea>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-xs-12 col-sm-2">温馨提醒:</label>
									<div class="col-xs-12 col-sm-8">
										<textarea class="form-control"  rows='3' name="warning"   placeholder="请填写温馨提醒" required>{$module.warning|default=''}</textarea>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-xs-12 col-sm-2">价格:</label>
									<div class="col-xs-12 col-sm-8">
										<input type="number" name="price" class="form-control" value="{$module.price|default='0'}" placeholder="请填写价格" />
									</div>
								</div>
								<!-- ui设计图url开始 -->
								<div class="form-group">
									<label for="c-keywords" class="control-label col-xs-12 col-sm-2">UI设计图URL:</label>
									<div class="col-xs-12 col-sm-8">
										<input id="image_info" class="form-control" size="35" name="ui_url" type="text" value="{$module.ui_url|default=''}" placeholder="填写UI设计图URL地址" required >
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-xs-12 col-sm-2">UI设计图:</label>
									<div class="col-xs-12 col-sm-8">
										<div class="input-group">
											<input name="ui" type="text" class="form-control" readonly value="{$module.ui|default=''}"  placeholder="请上传UI设计图文件" >
											<div class="input-group-addon no-border no-padding">
												<span style="position: relative;">
													<button type="button" class="btn btn-danger plupload" style="position: relative; z-index: 1;" id="uiMap"><i class="fa fa-upload"></i> 上传文件</button>
												</span>
												<!-- <span>
													<button type="button" class="btn btn-primary fachoose"><i class="fa fa-list"></i> 选择</button>
												</span> -->
											</div>
											<span class="msg-box n-right"></span>
										</div>
										<ul class="row list-inline plupload-preview" id="image_list"></ul>
									</div>
								</div>
								<!-- ui设计图url结束 -->		

								<div class="form-group">
									<label class="control-label col-xs-12 col-sm-2">上传模块源文件(压缩包):</label>
									<div class="col-xs-12 col-sm-8">
										<div class="input-group">
											<input name="resource" type="text" class="form-control" readonly value="{$module.resource|default=''}"  placeholder="请上传模块压缩包文件" required>
											<div class="input-group-addon no-border no-padding">
												<span style="position: relative;">
													<button type="button" class="btn btn-danger plupload" style="position: relative; z-index: 1;" id="resource"><i class="fa fa-upload"></i> 上传模块源码</button>
												</span>
												<!-- <span>
													<button type="button" class="btn btn-primary fachoose"><i class="fa fa-list"></i> 选择</button>
												</span> -->
											</div>
											<span class="msg-box n-right"></span>
										</div>
										<ul class="row list-inline plupload-preview" id="image_list"></ul>
									</div>
								</div>
								
								<div class="form-group">
									<label class="control-label col-xs-12 col-sm-2">预览图:</label>
									<div class="col-xs-12 col-sm-8">
										<div class="input-group">
											<div class="input-group-addon no-border no-padding">
												<span style="position: relative;">
													<input type="hidden" name="preview" value="{$module.preview|default=''}" placeholder="请上传模块预览图" required />
													<button type="button" class="btn btn-danger plupload" style="position: relative; z-index: 1;" id="images_upload"><i class="fa fa-upload"></i> 上传</button>
												</span>
											</div>
											<span class="msg-box n-right"></span>
										</div>
										<ul class="row list-inline plupload-preview" id="images_list">
											<volist name="previewList" id="vo">
												<li class="col-xs-3"><a href="" data-url="#" target="_blank" class="thumbnail"><img src="/<?php echo $previewList[$key] ; ?>" alt="00" class="img-responsive"></a><a href="javascript:;"  class="btn btn-danger btn-xs btn-trash upload-delete-btn"><i class="fa fa-trash"></i></a></li>
											</volist>
										</ul>
									</div>
								</div>

								<div class="form-group">
									<input type="hidden" id="audit-id" name="" value="{$module.id|default=0}">
									<label for="c-keywords" class="control-label col-xs-12 col-sm-2">操作:</label>
									<div class="col-xs-12 col-sm-8">
										<a href="javascript:;" class="btn btn-primary" onclick="formData(this,'save');"><span class="glyphicon glyphicon-floppy-disk"></span>保存</a>
										<a href="javascript:;" class="btn btn-success" onclick="formData(this,'audit');"><span class="glyphicon glyphicon-saved"></span>提交审核</a>
									</div>
								</div>

							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
    <include file='public/scripts'>
	<script src="__PLUGIN_TMPL__/public/assets/layui/layui.all.js"></script>
	<script src="__STATIC__/js/custom/custom.js"></script>
<script type="text/javascript">

	//多图容器
	var imgTmp = <?php echo json_encode($previewList);?>;

	var method = {};
	$(function(){
		;!function(){
			var layer = layui.layer
			,form = layui.form
			,$ = layui.jquery
		    ,upload = layui.upload;

		    //上传模块压缩包文件
			upload.render({ 
				elem: '#resource'
				,url: "{:cmf_plugin_url('Appmarket://publish/upResource')}?id={$module.id|default=0}"
				,accept: 'file' //普通文件
				,exts: "zip|rar" //只允许上传压缩文件
				,done: function( data ){
					var icon  = ( data.code == 200 ) ? 1 : 5;
					layer.msg( data.message , { icon: icon } );
					if( icon == 1 ){
						$('input[name=resource]').val( data.data );
					}			
				}
			});

			$('.plupload-preview').on('click','.btn-trash',function(){
				if($(this).parent('#image_list')){
					$('#image_list li').remove();
					$('#image_info').val('');
				}else{
					$(this).parent('li');
				}
				
			})			
			//多图片上传
		    upload.render({
				elem: '#images_upload'
				,url: '{:cmf_plugin_url("Appmarket://publish/preview")}?id={$module.id|default=0}'
				,exts:'jpg|bmp|png|gif|jpeg'
				,multiple: true
				,before: function(obj){
				  //预读本地文件示例，不支持ie8
				  obj.preview(function(index, file, result){
					  $('#images_list').append('<li class="col-xs-3"><a href="" data-url="#" target="_blank" class="thumbnail"><img src="'+result+'" alt="'+ file.name +'" class="img-responsive"></a><a href="javascript:;"  class="btn btn-danger btn-xs btn-trash upload-delete-btn"><i class="fa fa-trash"></i></a></li>')
				  });
				}
				,done: function(res){
				 	//上传完毕
					if(res.code!=200){
					  	$('#images_list').html('');
					  	$('input[name=preview]').val('');
					    return layer.msg(res.message);
					}else{
						//成功后的操作
					  	imgTmp.push(res.data);
					  	$('input[name=preview]').val(imgTmp);
					}
				}
		    });


		    //上传ui图
			upload.render({ 
				elem: '#uiMap'
				,url: "{:cmf_plugin_url('Appmarket://publish/uiMap')}?id={$module.id|default=0}"
				,accept: 'file' //普通文件
				,exts: "zip|rar" //只允许上传压缩文件
				,done: function( res ){
					showMessage( res , 'ui' , '#uiMap' );				
				}
			});

			var showMessage = function( data , inputName , id ){
				var icon  = (data.code == 200 )? 1: 5;
				layer.msg( data.message , { icon: icon });
				if( icon == 1 ){
					$('input[name='+inputName+']').val(data.data);
				}
			}



		}();
	})

	//移除图片
	$(document).on( 'click' , '.upload-delete-btn' , function(){
		var _this = $(this);
		var img = _this.parents('li').find('img');
		var index = $('.img-responsive').index(img);
		var file = imgTmp[index];
		imgTmp.splice(index,1);
		_this.parents('li').remove();
		$('input[name=preview]').val(imgTmp);
		$.post( "{:cmf_plugin_url('Appmarket://publish/trashFile')}" , { file : file , id: $('#audit-id').val() , preview : $('input[name=preview]').val()  } , function(data){
		} , 'json');
	});
</script>


<script type="text/javascript"> 
	var formData = function( _this , type ){
		var formData = $($('#edit-form').serializeArray());
		console.log('表单数据：');
		console.log(formData);
		var tmp = {};
		var flag = true;
		var message = '请将数据填写完整后再提交！';
		$.each(formData,function( index , value ){
			$('[name='+value.name+']').css('border','');
			//提交审核的时候必须校验
			if( type == 'audit'  && $.trim( value.value ) == ""  &&  ( $('[name='+value.name+']').attr('required') != undefined )  ){
				$('[name='+value.name+']').css('border','1px solid red');
				flag = false;
				message = $('[name='+value.name+']').attr('placeholder');
				return false;
			}

			tmp [ value.name ] = value.value;
		});
		if( !isOk || !flag ){
			layer.msg( message );
			return false;
		}
		var id = $('#audit-id').val();
		if( type == "audit" && id == 0 ){
			layer.msg('请先保存后再提交审核！');
			return false;
		}
		banBtn(_this);
		//提交数据
		$.post( "{:cmf_plugin_url('Appmarket://publish/stepTwoPost')}" , {id:id,type:type,data:tmp} ,function(data){
			console.log(data);
			var icon  = ( data.code == 200 ) ? 1 : 5;
			layer.msg( data.message , { icon : icon });
			if( type == 'audit' && data.code == 200 && data.data.res == 'url'){
				//跳转页面到申请结果页面
				setTimeout(function(){
					window.location.href = data.data.url;
				}, 1200);
			}
			cancelBan(_this);
		},'json')
	}

//模块菜单验证
var isRequest = false;
var isOk = true;
var checkModuleMenu = function(_this){
	var moduleName = $('#module-name').val();
	var moduleSymbol = $('#module-symbol').val();
	var url = "{:cmf_plugin_url('Appmarket://publish/checkModuleMenu')}";
	if( isRequest ){ return false; }
	isRequest = true;
	$('input[name=name]').removeAttr('readonly');
	$('input[name=name]').val('');
	$.post( url , {moduleName:moduleName,moduleSymbol:moduleSymbol} , function(data){
		var color = "color:#9FE059";
		isOk = (data.code == 200 ) ;
		if( data.code != 200 ){
			color = "color:red;";
		}
		if( data.code == 200 && !(data.data == undefined) ){
			$('input[name=name]').attr('readonly',true);
			$('input[name=name]').val(data.data);
		}	
		var warning = '<span style="'+color+'">'+data.message+'</span>';
		$(_this).siblings().remove();
		$(_this).after(warning);
		isRequest = false;
		console.log("cmm->:"+isOk);
	} ,'json' );
};

//版本号验证
var checkVersionNumber = function(_this){
	var reg = /^\d+(\.\d+)+$/;
	var versionStr = $(_this).val();
	var flag = true;
	if( false == reg.test( versionStr ) ){
		flag = false;
		var message = "版本号格式错误，请检查！";
		if( $.trim( versionStr ) == '' ){
			message = "请填写版本号！";
		}
		var warning = '<span style="color:red;">'+message+'</span>';
		$(_this).siblings().remove();
		$(_this).after(warning);
	}else{ 
		$(_this).siblings().remove();
	}
	isOk = ( isOk && flag );
}
</script>

<script type="text/javascript">

</script>
</body>
</html>

